<template>
	<view class="root">
		<view class="br-20 bgc-fff lh-3" :style="{ margin: `50rpx 20rpx` }">
			<text class="ml-20 mr-20">
				<text class="color-333 fs-28 fw-600">请留下您的联系方式</text>
				<text class="color-999 fs-26 ml-12">(客服稍后回访）</text>
			</text>

			<view v-for="(option, key) in model" :key="key" class="fd-row ai-center ml-20 mr-20">
				<text class="color-333 fs-28 fw-600">{{ option.title }}：</text>
				<label class="f1 ml-20" @click="operation(key)">
					<input
						class="f1 input fs-26 pr-20"
						:type="option.type"
						:maxlength="option.maxlength"
						:placeholder="option.placeholder"
						:value="option.value || option.data"
						:disabled="option.disabled"
						@input="inputValue(key, $event)"
						placeholder-style="color: #ccc"
					/>
					<uni-icons v-if="option.disabled" type="arrowright" />
				</label>
			</view>
		</view>
		<button
			class="bgc-f45455 color-fff br-20 ml-20 mr-20 mt-88 mb-88 fw-600 fs-30 lh-3"
			hover-class="tap-hover"
			@click="submit"
		>
			提交
		</button>
	</view>
</template>

<script lang="ts">
	import { Vue, Component } from "vue-property-decorator";
	import { sleep } from "@/static/libs/utils";

	@Component
	export default class MakeApplets extends Vue {
		// component property

		model: AnyObject = {
			address: {
				title: "地址",
				placeholder: "请选择您的地址",
				maxlength: -1,
				value: "",
				data: "",
				disabled: true,
			},
			phoneNumber: {
				title: "电话",
				placeholder: "请输入您的电话号码",
				maxlength: 11,
				data: "",
			},
			name: {
				title: "姓名",
				placeholder: "请输入您的姓名",
				maxlength: 16,
				data: "",
			},
		};

		async submit() {
			const params: AnyObject = {},
				verify: boolean = Object.keys(this.model).every((key) => {
					const option = this.model[key];

					params[key] = option.data;
					!option.data && uni.showToast({ title: option.placeholder, icon: "none" });
					return Boolean(option.data);
				});
			if (!verify) return;
			const [showFail, showRes]: any = await uni.showActionSheet({
				itemList: ["我要做小程序开店", "我要做区域代理"],
				itemColor: "#fb8629",
			});
			if (showFail) return;

			uni.showLoading({ title: "Loading..." });

			this.$request
				.post("/shop/addCounsel", Object.assign(params, { type: showRes.tapIndex }))
				.then(async ({ msg: title }) => {
					uni.showToast({ title, duration: 1000, mask: true });
					await sleep(1);
					uni.navigateBack({});
				});
		}
		inputValue(key: string, { detail }: AnyObject) {
			this.model[key].data = detail.value;
		}

		operation(key: string) {
			const option = this.model[key];
			if (!option.disabled) return;
			switch (key) {
				case "address":
					uni.chooseLocation({
						success: (res) => {
							option.value = res.name;
							option.data = JSON.stringify(res);
						},
					});
					break;

				default:
					break;
			}
		}
	}
</script>

<style lang="scss" scoped>
	// scss
</style>